/*
 * @Author: your name
 * @Date: 2021-11-02 14:52:04
 * @LastEditTime: 2021-11-03 14:28:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-source-code-snanndom\src\mySnabbdom\createElement.js
 */
// 真正的创建节点，将vnode利用cnode中的elm创建为dom，插入到pivot这个元素之前
// 2. 现在不在这个函数插入，直接创建节点，然后在patch函数中将节点插入到指定位置
export default function createElement(vnode) {
    console.log('目的是把虚拟节点', vnode, '真正变为dom，但是该函数不会把dom插入到页面的');
    // 创建一个dom节点，这个节点是一个孤儿节点
    let domNode = document.createElement(vnode.sel)
    // 有子节点还是有文本？
    if (vnode.text != '' && (vnode.children == undefined || !vnode.children.length)) {
        // 他内部是文字
        domNode.innerText = vnode.text
        // 将孤儿节点上树.让标杆节点的父元素调用insertBefore方法，将新的节点插入到标签节点之前
        // pivot.parentNode.insertBefore(domNode, pivot);
        // 将孤儿节点上树.appendChild，将新的节点插入标杆节点
        // pivot.appendChild(domNode, pivot);

    } else if (Array.isArray(vnode.children) && vnode.children.length) {
        for (let i = 0; i < vnode.children.length; i++) {
            let childrens = vnode.children[i]
            // 创建出它的dom，一旦调用createElement这个函数就意味着：创建出dom了，并且它的elm属性指向了创建出的dom，但是还没有上树
            let chDom = createElement(childrens)
            // 把数组中的每一层dom放在该层最后面--上树
            domNode.appendChild(chDom)
        }

    }
    vnode.elm = domNode

    // 在某些情况下递归返回这个节点，elm是一个纯dom
    return vnode.elm;
}